<template>
    <div>
        <div style="margin-top: 2px">
            <el-tabs v-model="tag" type="card" @tab-click="handleClick">
                <el-tab-pane label="" name="ask">
                    <span slot="label"><i class="el-icon-document"></i> 我的提问</span>
                    <div v-loading="loading"
                         element-loading-text="拼命加载中"
                         element-loading-spinner="el-icon-loading">
                        <div style="display: flex">
                            <div class="wen1">
                                <el-card style="margin-top: 10px" v-for="item in Myquestions" :key="item.id">
                                    <el-row>
                                        <span style="color: #415969">{{item.username}}</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span style="color: #71777c">{{(new Date(item.createTime).getFullYear() === new Date().getFullYear()) ?
                                (new Date(item.createTime).getMonth() === new Date().getMonth() ?
                                (new Date(item.createTime).getDate() === new Date().getDate() ? '今天'+ item.createTime.substring(11,16)
                                :  new Date().getDate() - new Date(item.createTime).getDate() + '天前')
                                : new Date().getMonth() - new Date(item.createTime).getMonth() + '月前')
                                : new Date().getFullYear() - new Date(item.createTime).getFullYear() + '年前' }}</span>
                                    </el-row>
                                    <p class="title" @click="ToReply(item)">{{item.title}}</p>
                                    <p class="txt">{{item.content}}</p>
                                    <el-row>
                                        <img class="icon" src="../../assets/icon/praise.svg" alt="点赞">
                                        <span style="color: #6d8868">{{item.praise}}</span>
                                        <img  class="icons" style="margin-left: 30px;" src="../../assets/icon/answer.svg" alt="点赞">
                                        <span style="color: #6d8868">{{item.agreeId ? '评论' : '暂无'}}</span>
                                        <span style="float: right;margin-right: 10px;">
                                            <el-button type="text" style="color: #aa1a30" @click="removeAsk(item.id)">删除</el-button>
                                        </span>
                                    </el-row>
                                </el-card>
                            </div>
                        </div>
                        <div style="height: 20vh"></div>
                        <div style="display: flex;flex-direction: column;align-items: center">
                            <p class="tishi">似乎没有其他问题了，快去提问吧~</p>
                            <el-button class="tishi"  plain type="warning" @click="ToQuest">
                                <i class="el-icon-edit-outline"></i>
                                前往提问广场
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="我的回答/评论" name="answer">
                    <div v-loading="loading"
                         element-loading-text="拼命加载中"
                         element-loading-spinner="el-icon-loading">
                        <div style="display: flex">
                            <div class="wen1">
                                <el-card style="margin-top: 10px" v-for="item in Myresponse" :key="item.id">
                                    <el-row>
                                        <span style="color: #415969">{{item.question.username}}</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span style="color: #71777c">{{(new Date(item.question.createTime).getFullYear() === new Date().getFullYear()) ?
                                (new Date(item.question.createTime).getMonth() === new Date().getMonth() ?
                                (new Date(item.question.createTime).getDate() === new Date().getDate() ? '今天'+ item.question.createTime.substring(11,16)
                                :  new Date().getDate() - new Date(item.question.createTime).getDate() + '天前')
                                : new Date().getMonth() - new Date(item.question.createTime).getMonth() + '月前')
                                : new Date().getFullYear() - new Date(item.question.createTime).getFullYear() + '年前' }}</span>
                                    </el-row>
                                    <p class="title" @click="ToReply(item.question)">{{item.question.title}}</p>
                                    <p class="txt">{{item.question.content}}</p>
                                    <el-row style="margin-top: 10px;">
                                        <div style="float: right">
                                            <img class="icon" src="../../assets/icon/praise.svg" alt="点赞">
                                            <span style="color: #6d8868">{{item.question.praise}}</span>
                                            <img  class="icons" style="margin-left: 30px;" src="../../assets/icon/answer.svg" alt="点赞">
                                            <span style="color: #6d8868">{{item.question.agreeId ? '已有采纳' : '暂无'}}</span>
                                        </div>
                                    </el-row>
                                    <el-divider content-position="left"><span style="font-size: 14px;color: #8F2139">我的回答:</span></el-divider>
                                    <el-row>
                                        <span style="color: #415969">我自己哟</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span style="color: #71777c">{{(new Date(item.createTime).getFullYear() === new Date().getFullYear()) ?
                                (new Date(item.createTime).getMonth() === new Date().getMonth() ?
                                (new Date(item.createTime).getDate() === new Date().getDate() ? '今天'+ item.createTime.substring(11,16)
                                :  new Date().getDate() - new Date(item.createTime).getDate() + '天前')
                                : new Date().getMonth() - new Date(item.createTime).getMonth() + '月前')
                                : new Date().getFullYear() - new Date(item.createTime).getFullYear() + '年前' }}</span>
                                    </el-row>
                                    <p class="txt" style="color: #8f3721">
                                        <VueMarkdown style="margin-bottom: 10px" v-if="item.content" :source="item.content"></VueMarkdown>
                                        <span v-else>暂无</span>
                                    </p>
                                    <el-row style="margin-top: 10px">
                                        <img class="icon" src="../../assets/icon/praise.svg" alt="点赞">
                                        <span style="color: #6d8868">{{item.praise}}</span>
                                        <span style="float: right;margin-right: 10px;">
                                            <el-button type="text" style="color: #aa1a30" @click="removeResponse(item.id)">删除</el-button>
                                        </span>
                                    </el-row>
                                </el-card>
                            </div>
                        </div>
                        <div style="display: flex;flex-direction: column;align-items: center">
                            <p class="tishi">似乎没有其他回答了，快去评论吧~</p>
                            <el-button class="tishi"  plain type="warning" @click="ToHome">
                                <i class="el-icon-edit-outline"></i>
                                前往广场康康~
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>

<script>
    import VueMarkdown from "vue-markdown";
    export default {
        name: "MyAll",
        components:{
            VueMarkdown
        },
        data(){
            return{
                tag:'ask',
                Myquestions:[],
                Myresponse:[],
                loading:true
            }
        },
        created() {
            this.getMyQuestion()
        },
        methods:{
            handleClick(tab) {
                let tabs = tab.$vnode.componentOptions.propsData.name
               if (tabs == 'answer') {
                    this.getMyResponse()
                }
               else {
                    this.getMyQuestion()
                }
            },
            // 获取我的问题
            async getMyQuestion(){
                this.loading = true
                const { data: res } = await this.$http.get('/user/ask/'+localStorage.getItem("username"))
                console.log(res)
                if(res.code !== 200){
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.Myquestions = res.data
                this.loading = false
            },
            // 获取我的回答
            async getMyResponse(){
                this.loading = true
                const { data: res } = await this.$http.get('/answer/my/'+localStorage.getItem("username"))
                console.log(res)
                if(res.code !== 200){
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.Myresponse = res.data
                this.loading = false
            },
            async removeAsk (id) {
                const confirmResult = await this.$confirm('此操作将永久删除该问题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                // 若用户确认删除，则返回值为字符串 confirm
                // 若取消删除，返回 cancel
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const { data: res } = await this.$http.delete('/ask/delAsk/'+ id)
                console.log(res)
                if (res.code !== 200) {
                    return this.$message.error(res.msg)
                }
                this.$message.success('删除成功!')
                this.getMyQuestion()
            },
            async removeResponse (id) {
                const confirmResult = await this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                // 若用户确认删除，则返回值为字符串 confirm
                // 若取消删除，返回 cancel
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const { data: res } = await this.$http.delete('/answer/del/'+ id)
                if (res.code !== 200) {
                    return this.$message.error(res.msg)
                }
                this.$message.success('删除成功!')
                this.getMyResponse()
            },
            // 去回答
            ToReply(question){
                this.$router.push({
                    path: '/user/Reply',
                    query: {data:JSON.stringify(question)}
                })
            },
            ToQuest(){
                this.$router.push('/user/Ask')
            },
            ToHome(){
                this.$router.push('/user/Home')
            },
            WarningMsg(msg) {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: teal'}, msg),
                    offset: 100,
                    duration: 3000
                });
            },
        }
    }
</script>

<style scoped>
    .wen1{
        width: 80%;
        margin-left: 10%;
        font-size: 10px;
    }
    .title{
        font-weight: 700;
        font-size: 12px;
        line-height: 24px;
        color: #1d2129;
        margin-bottom: 12px;
        cursor: pointer;
    }
    .txt{
        color: #4e5969;
        /*height: 44px;*/
        font-size: 10px;
    }
    .icon{
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }
    .icons{
        width: 15px;
        height: 15px;
        vertical-align: middle;
        margin-right: 4px;
    }
    .tishi{
        color: #958480;
        font-size: 9px;
        margin-bottom: 10px;
    }

</style>
